<!--
 * @Author: wjk
 * @Date: 2020-11-04 15:40:42
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-06 16:55:15
 * @description: file content
-->
<template>
  <view class="start-column">
    <view
      v-for="i in startLength"
      :key="i"
      class="coulumn"
      @click="changeStart(i)">
      <image
        :src=" i <= (score ? score : 5) ? '/static/images/order/icon_star_selected.png' : '/static/images/order/icon_star.png'"
      />
    </view>
  </view>
</template>
<script>
export default {
  name: 'EvaluationStar',
  props: {
    source: {
      type: Object,
      default() {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    nameKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      startLength: [1, 2, 3, 4, 5],
      score: 5,
      listQuery: {
        page_size: 10,
        page_no: 1,
        loading: false,
        nomore: false
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      if (this.nameKey && this.source[this.nameKey]) {
        this.score = this.source[this.nameKey]
      } else {
        this.changeStart(5)
      }
    },
    changeStart(index) {
      if (this.disabled) return
      this.score = index
      if (this.nameKey) {
        this.source[this.nameKey] = index
      }
      this.$emit('update:source', this.source)
    }
  }

}
</script>
<style lang="scss" scoped>
.start-column{
  display: flex;
  .coulumn{
    width: 50rpx;
    height: 50rpx;
    padding: 10rpx;
    box-sizing: border-box;
  }
  image{
    width: 30rpx;
    height: 30rpx;
  }
}
</style>
